<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/9/28
  Time: 19:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/pintuer.css/"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css/"/>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.5.0.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<head>
    <title>院系管理界面</title>
</head>
<div>
    <button class="button" onclick="addOne()">新增学院</button>
</div>
<body>
<div class="margin">
    <table class="table">
        <thead>
        <tr>
            <td>学院编号</td>
            <td>学院名</td>
            <td>院系基本信息描述</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody id="tb"></tbody>
    </table>
</div>
<%--分页区域--%>
<div class="margin">
    每页显示<select id="pageSizeSelect" onchange="onSelectChange()">
    <option value="2" select="selected">2</option>
    <option value="4">4</option>
    <option value="6">6</option>
</select> 条数据，当前是第<span id="currentPageSpan" onchange="onchange()"></span> 页，
    总共<span id="totalPageSpan" onchange="AllPage()"></span>页
    <button class="button" onclick="firstPage()">首页</button>
    <button class="button" onclick="perPage()">上一页</button>
    <button class="button" onclick="nextPage()">下一页</button>
    <button class="button" onclick="lastPage()">尾页</button>

</div>
<%--这里的div做一个编辑班级信息的模态框--%>
<div class="modal" id="Modal">
    <%--对话模态框--%>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>学院信息操作</h4>
            </div>
            <div class="modal-body">
                <label class="control-label">学院名</label>
                <input class="form-control" type="text" id="facultyNameInput" placeholder="请输入学院名"></br>
                <label class="control-label">院系基本信息描述</label>
                <input class="form-control" type="text" id="facultyDescriptionInput" placeholder="请输入学院描述"></br>
                <input type="hidden" id="facultyIdInput">
            </div>
            <div class="modal-footer">
                <button class="button" data-dismiss="modal">取消</button>
                <button class="button" onclick="checkchoose()">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="checkModal">
    <%--对话模态框--%>
    <div class="modal-dialog">
        <div class="modal-content">
                <input class="text" type="text" value="无法逆转的删除，你真的确定这么做吗？">
                <button class="button" data-dissmiss="modal">我再想想</button>
                <button class="button" onclick="sureChoose()">我想好了</button>
            </div>
        </div>
    </div>
</div>

<script>
    function sureChoose() {
        deleteOneFaculty();
    }
    //当前页码
     var currentPage=1;
     //每页记录数
    var pageSize=2;
    //总页数
    var totalPage;
    $(function() {
        getListByPage();
    });
    function onSelectChange() {
        pageSize=$("#pageSizeSelect").val();
        currentPage=1;
        getListByPage();
    }
    //查询总页数
    function AllPage() {
        pageSize=$("#currentPageSpan").val();
        getListByPage();
    }


    //用户修改的每一页的记录数
    function onchange() {
    totalPage=$("#currentPageSpan").val();
        getListByPage();
    }
    //首页的回调方法
    function firstPage() {
        currentPage=1;
        getListByPage();
    }
    //上一页的回调方法
    function perPage() {

        if (currentPage<2){
            currentPage=1;
            getListByPage();
        }else {
            currentPage--;
            getListByPage();
        }
    }
    //下一页回调方法
    function nextPage() {
        if (currentPage>=totalPage){
            currentPage=totalPage;
            getListByPage();
        }else {
            currentPage++;
            getListByPage();
        }
    }

    //尾页回调方法
    function lastPage() {
        currentPage=totalPage;
        getListByPage();
    }

    function  showFacultyList(facultyList){
        var html='';
        for (var i = 0; i <facultyList.length ; i++) {
            var  item =facultyList[i];
            html+="<tr>";
            html+="<td>"+item.id +"</td>";
            html+="<td>"+item.name +"</td>";
            html+="<td>"+item.description +"</td>";
            html+="<td><button class='button' onclick='getOneFaculty(\""+item.id+"\")'>编辑</button>" +
                "<button class='button' onclick='deleteOneFaculty(\""+item.id+"\")'>删除</button></td>";
            html+="</tr>";
        }
        $("#tb").html(html);
    }
    function getFacultyList() {
        $.ajax({
            url:"${pageContext.request.contextPath}/faculty/getFacultyList",
            type:"get",
            dataType:"json",
            success:function (result) {
                if (result.code==0){
                    showFacultyList(result.FacultyList);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
    //分页加载用户数据列表
    function getListByPage() {
        $.ajax({
            url:"${pageContext.request.contextPath}/faculty/getListByPage",
            type:"get",
            data:{
                "currentPage":currentPage,
                "pageSize":pageSize
            },
            dataType: "json",
            success:function (result) {
                if (result.code==0){
                    showFacultyList(result.FacultyList);
                    totalPage=result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#currentPageSpan").html(currentPage);
                }
            },
            error:function (error) {
                console.log(JSON.stringify(error))
            }
        });
    }
    function addOne() {
        showModal();
    }
    //获取用户详细信息
    function getOneFaculty(id) {
        $.ajax({
            url:"${pageContext.request.contextPath}/faculty/getOneFaculty",
            type:"get",
            data:{
                "id":id
            },
            dataType:'json',
            success:function (result) {
                if (result.code==0) {
                    showModal(result.FacultyList);
                }else {
                    alert(result.message);
                }
            },
            error:function (error) {
                console.log(JSON.stringify(error));
            }
        })
    }
    //显示用户编辑和增加的模态框
    function showModal(faculty) {
        if (faculty!=null){
            $("#facultyIdInput").val(faculty.id);
            $("#facultyNameInput").val(faculty.name);
            $("#facultyDescriptionInput").val(faculty.description);
        }else {
            //数据归0
            $("#facultyIdInput").val(0);
            $("#facultyNameInput").val("");
            $("#facultyDescriptionInput").val("");
        }
        $("#Modal").modal("show");
    }
    //显示用户删除的模态框
    function showCheckModal() {
        $("#checkModal").modal("show");
    }
    function checkchoose(){
        var facultyIdValue=$("#facultyIdInput").val();
        var facultyNameValue=$("#facultyNameInput").val();
        var facultyDescriptionValue=$("#facultyDescriptionInput").val();

        $.ajax({
            url:"${pageContext.request.contextPath}/faculty/ChangeOne",
            //表明是普通表单提交
            contentType:'application/x-www-form-urlencoded',
            data:{
                "id":facultyIdValue,
                "name":facultyNameValue,
                "description":facultyDescriptionValue
            },
            dataType:'json',
            success:function (result) {
                if (result.code==0){
                    //再次分页加载并显示在页面上
                $("#Modal").modal("hide");
                getListByPage();
            }else {
                    alert(result.message);
                  }
                },
            error:function (error) {
                console.log(JSON.stringify(error))
            }
        })
    }
    function deleteOneFaculty(id) {
        $.ajax({
            url:"${pageContext.request.contextPath}/faculty/deleteOne",
            //表明是普通表单提交
            contentType:'application/x-www-form-urlencoded',
            data:{
                "id":id,
            },
            dataType:'json',
            success:function (result) {
                if (result.code==0){
                    getListByPage();
                }else {
                    alert(result.message);
                }
            },
            error:function (error) {
                console.log(JSON.stringify(error))
            }
        })
    }
</script>
</body>
</html>
